$(document).ready(function(){
    masonryWidth();
    getMasonry($url,1);
});

// 点击获取
$('#buttom').on( 'click', function() {
    $page = $("#page").val();
    //$url = "{:URL('Article/ajaxList')}";
    getMasonry($url,$page);
});

// 滚动获取
$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if(scrollTop + windowHeight == scrollHeight){
        $page = $("#page").val();
        getMasonry($url,$page);
    }
});


// 获取Masonry数据
function getMasonry($url,$page){
    $page = parseInt($page);
    // 显示加载
    $('#loading').show();
    $.ajax({
        //url:"{:URL('Article/ajaxList')}",
        url:$url,
        data:{'page':$page},
        success:function(content){

            if(content ==1){
                //alert('没有数据了');
                $('#loading').css('display','none');
                $('#loadingEnd').show();
            }else{
                var $content = $( content );
                $masonry.append( $content ).masonry( 'appended', $content );
                $("#page").val($page+1);
            }
            $('#loading').css('display','none');
        }
    });
}

// 设置masonry 宽度
function masonryWidth(){
    $browser = document.body.clientWidth;

    $boxWidth = 250;         // 盒子宽度
    $boxSpacing = 20;        //盒子与盒子之间的间距

    if($browser <=500 ){
        $("#masonry").css('width',250);
    }else{
        $num = ($browser-$boxWidth) / ($boxWidth + $boxSpacing );
        $n = parseInt($num);
        $masonryWidth = $n * ($boxWidth + $boxSpacing) + $boxWidth;

        $("#masonry").css('width',$masonryWidth);
    }
    window.onresize = masonryWidth;

}


